<template>
  <el-tabs v-model="activeName" class="demo-tabs tabs">
    <el-tab-pane label="登录" name="first">
      <div class="container">
        <el-form ref="loginRuleFormRef" :model="loginRuleForm" status-icon :rules="rules" label-width="auto"
          class="demo-ruleForm">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="loginRuleForm.name" class="input" />
          </el-form-item>

          <el-form-item label="密 码" prop="password">
            <el-input v-model="loginRuleForm.password" type="password" autocomplete="off" class="input" />
          </el-form-item>

          <el-form-item class="button">
            <el-button type="primary" plain @click="submitLoginForm(loginRuleFormRef)">登 录</el-button>
            <el-button @click="resetLoginForm()">清 空</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="注册" name="second">
      <div class="container">
        <el-form ref="resRuleFormRef" :model="resRuleForm" status-icon :rules="rules" label-width="auto"
          class="demo-ruleForm">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="resRuleForm.name" class="input" />
          </el-form-item>

          <el-form-item label="密 码" prop="pass">
            <el-input v-model="resRuleForm.password" type="password" autocomplete="off" class="input" />
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="resRuleForm.email" class="input" />
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="resRuleForm.phone" class="input" />
          </el-form-item>

          <el-form-item class="button">
            <el-button type="primary" plain @click="submitResForm(resRuleFormRef)">注 册</el-button>
            <el-button @click="resetResForm()">清 空</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { userLogin, userRegister } from '@/request/api'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'

const activeName = ref('first')

const router = useRouter()

const loginRuleFormRef = ref()
const resRuleFormRef = ref()

// 用户名校验规则
const checkName = (_rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入用户名'))
  }
  const temp = /\w{0,18}/
  if (temp.test(value)) {
    callback()
  } else {
    callback(new Error('用户名不能为空'))
    callback()
  }
}
// 密码校验规则
const validatePass = (_rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

// 登录表单数据
const loginRuleForm = reactive({
  name: '',
  password: '',
})

// 校验规则
const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  name: [{ validator: checkName, trigger: 'blur' }],
})

// 登录
const submitLoginForm = (formEl: any) => {
  if (!formEl) return
  formEl.validate((valid: any) => {
    if (valid) {
      console.log('submit!')
      userLogin(loginRuleForm).then((res: any) => {
        console.log(res)
        if (res.code === 404) {
          ElNotification({
            title: res.msg,
            type: 'error',
            duration: 1000
          })
          return
        }
        if (res.code === 200) {
          ElNotification({
            title: res.msg,
            type: 'success',
            duration: 1000
          })
          // 登录成功将user_id存到本地
          sessionStorage.setItem("user_id", res.data.user_id)
          // 跳转到系统主页
          router.push('/system/book')
        }


      })
        .catch((err: any) => {
          console.log(err);
        });


    }
  })
}

// 重置登录表单
const resetLoginForm = () => {
  loginRuleForm.name = ''
  loginRuleForm.password = ''
}

// 注册表单数据
const resRuleForm = reactive({
  name: '',
  password: '',
  email: '',
  phone: '',
})

// 注册
const submitResForm = (formEl: any) => {
  if (!formEl) return
  formEl.validate((valid: any) => {
    if (valid) {
      console.log('submit!')
      userRegister(resRuleForm).then((res: any) => {
        console.log(res)
        if (res.code === 200) {
          ElNotification({
            title: res.msg,
            type: 'success',
            duration: 1000
          })
          resetResForm()
          activeName.value = 'first'
        } else {
          ElNotification({
            title: res.msg,
            type: 'error',
            duration: 1000
          })
          return
        }

      }).catch((err: any) => {
        console.log(err);
      });
    }
  })

}

// 重置注册表单
const resetResForm = () => {
  resRuleForm.name = ''
  resRuleForm.password = ''
  resRuleForm.email = ''
  resRuleForm.phone = ''
}
</script>

<style scoped>
.tabs {
  width: 320px;
  /* height: 200px; */
  margin: 100px auto 0;
  padding: 20px;
  background-color: rgb(245, 248, 252);
  border-radius: 10px;
  box-shadow: 0px 0px 10px 2px rgb(228, 225, 225);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(245, 248, 252);
  opacity: .85;
}

.input {
  width: 200px;
}

.button {
  position: relative;
  left: 66px;
}
</style>